<template>
  <div style="position: relative; overflow: hidden">
    <div class="mark" style="" @click="closeMark"></div>
    <div class="a animated" :class="out ? 'fadeInDown' : 'bounceOutUp'">
      <img
        width="500px"
        height="300px"
        src="../../assets/image/login_img.jpg"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "pop",
  data() {
    return {
      out: true,
    };
  },
  methods: {
    closeMark() {
      this.out = false;
      setTimeout(() => this.$emit("listenChild", false), 1000);
    },
  },
};
</script>

<style scoped>
.mark {
  z-index: 1000;
  position: fixed;
  background-color: rgba(3, 3, 3, 0.3);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.a {
  position: fixed;
  top: 20%;
  left: 50%;
  z-index: 1050;
  margin-left: -275px;
}
</style>
